import { detailState } from '@/store'
import { useRecoilValue } from 'recoil'

import RtcPlayer from '@/components/rtcPlayer'
import Talk from '@/components/talk'

import styles from './index.module.css'

const url = 'http://106.14.66.52:80/index/api/webrtc?app=rtp&stream=34020000001110000001_34020000001310000001&type=play';

type ElevatorDetailsProps = {
    visible: boolean,
    hide: () => void,
    currentElevator: Record<string, string | number> | null
}

const ElevatorDetails = (props: ElevatorDetailsProps) => {
    const {visible, hide} = props;
    const detailInfo = useRecoilValue(detailState);

    if (!visible) {
        return <></>;
    }

    return (
        <div className={styles.elevatorDetailsModal}>
            <div className={styles.elevatorDetailsContent}>
                <div className={styles.elevatorDetailsCloseButton} onClick={hide}></div>
                <div className={styles.elevatorDetailsContentTitle}>
                    <div>{detailInfo.address}</div>
                    <div>在线运行中</div>
                </div>
                <div className={styles.elevatorDetailsContentSubTitle}>
                    <div><span>运行状态：</span><span>1楼/禁止</span></div>
                    <div><span>电梯门状态：</span><span>关闭</span></div>
                </div>
                <div className={styles.elevatorDetailsVideoArea}>
                    <div className={styles.elevatorDetailsVideoAreaButtons}>
                        <div className={styles.elevatorDetailsVideoAreaButton} data-active={true}>
                            实时监控
                        </div>
                        <div className={styles.elevatorDetailsVideoAreaButton} data-active={false}>
                            监控回放
                        </div>
                    </div>
                    <div className={styles.elevatorDetailsVideoWrapper}>
                        {
                            detailInfo.videoUrl && <RtcPlayer url={url} />
                        }
                        <div className={styles.talkButton}>
                            <Talk />
                        </div>
                    </div>
                </div>
                <div className={styles.runningData}>
                    <div>当日运行数据</div><div>300次</div>
                    <div>今日载人</div><div>300人</div>
                    <div>累计运行次数</div><div>12335486次</div>
                    <div>累计载人</div><div>1300次</div>
                </div>
                <div className={styles.basicInfo}>
                    <div>
                        <span>电梯工号</span>
                        <span>{detailInfo.number}</span>
                    </div>
                    <div>
                        <span>电梯型号</span>
                        <span>{detailInfo.deviceClass}</span>
                    </div>
                    <div>
                        <span>电梯品种</span>
                        <span>{detailInfo.deviceSpec}</span>
                    </div>
                    <div>
                        <span>出场日期</span>
                        <span>{detailInfo.releaseDate}</span>
                    </div>
                    <div>
                        <span>使用场合</span>
                        <span>{detailInfo.deviceClass}</span>
                    </div>
                    <div>
                        <span>层/站/门</span>
                        <span>{detailInfo.floor}/{detailInfo.station}/{detailInfo.door}</span>
                    </div>
                    <div>
                        <span>使用地点</span>
                        <span>{detailInfo.address}</span>
                    </div>
                    <div>
                        <span>使用单位</span>
                        <span>{detailInfo.userParty}</span>
                    </div>
                </div>
                <div className={styles.maintenanceInfo}>
                    <div>
                        <span>上次维保</span>
                        <span>{detailInfo.lastModifiedDate || '--'}</span>
                    </div>
                    <div>
                        <span>下次维保时间</span>
                        <span>{detailInfo.nextMaintenanceDate  || '--'}</span>
                    </div>
                    <div>
                        <span>维保单位</span>
                        <span>{detailInfo.maintenanceParty || '--'}</span>
                    </div>
                    <div>
                        <span>维保联系人</span>
                        <span>{detailInfo.maintenancePartyPeople}  {detailInfo.maintenancePartyTelephone}</span>
                    </div>
                    <div>
                        <span>物业联系人</span>
                        <span>{detailInfo.userPartyPeople}  {detailInfo.userPartyTelephone}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ElevatorDetails